<template>
  <div class="index-panel">
    <topheader></topheader>
    <div class="stats-panel container-fluid">
      <div class="container">
        <h1 class="welcome-title text-center">欢迎来到我们的B2X矿池</h1>
        <div class="search-panel">
          <input class="accout-address" v-model="minerAddr" type="text" placeholder="账号地址" />
          <button class="search-btn phone-hide" @click="minerDetail" type="button">查看挖矿状态</button>
          <button class="search-btn pc-hide" @click="minerDetail" type="button"><i class="glyphicon glyphicon-search"></i></button>
        </div>
        <h2 class="pool-title text-center">矿池状态</h2>
        <div class="show-states-panel">
          <div class="show-state-item text-center">
            <div class="panel panel-hr">
              <div class="panel-heading">
                <h3 class="panel-title">算力</h3></div>
              <div class="panel-body">
                <h4 class="info-hashrate">{{api.unitCover(poolStats.hashrate)}}</h4></div>
            </div>
          </div>
          <div class="show-state-item show-state-item-main text-center">
            <div class="panel panel-miner">
              <div class="panel-heading">
                <h3 class="panel-title">在线矿工数量</h3>
              </div>
              <div class="panel-body">
                <h4 class="activeMiners">{{poolStats.miners}}</h4>
              </div>
            </div>
          </div>
          <div class="show-state-item show-state-item-main text-center">
            <div class="panel panel-miner" style="border-color:#009900;">
              <div class="panel-heading" style="background-color:#009900;">
                <h3 class="panel-title">在线矿机数量</h3>
              </div>
              <div class="panel-body">
                <h4 class="activeMiners">{{poolStats.workers}}</h4>
              </div>
            </div>
          </div>
          <div class="show-state-item text-center">
            <div class="panel panel-block">
              <div class="panel-heading">
                <h3 class="panel-title">挖到总块数</h3></div>
              <div class="panel-body">
                <h4 class="block-total">{{blockNum}}</h4></div>
            </div>
          </div>
        </div>
        <h2 class="pool-title text-center">矿池总算力</h2>
        <div id="totalHr"></div>
        <!--<h2 class="pool-title text-center">幸运值</h2>
        <div>
          <table class="table table-bordered text-center t-ct">
            <thead>
              <tr>
                <th>时间段</th>
                <th>幸运率</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in lucky">
                <td>{{item.tim}}</td>
                <td>{{item.rat}}</td>
              </tr>
            </tbody>
          </table>
        </div>-->
        <h2 class="pool-title text-center top20-miner">Top20&nbsp;矿工</h2>
        <table class="table text-center t-ct table-bordered">
          <thead>
            <tr>
              <th style="width:55%">矿工地址</th>
              <th style="width:40%">算力</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="miner in minersList" v-bind:key="miner.uname" v-if="miner.hashrate!=0">
              <td>
                <a v-bind:href="'./#/miner?addr='+ miner.uname" target="_blank">{{miner.uname}}</a>
              </td>
              <td>
                {{api.unitCover(miner.hashrate)}}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!--<div class="configure-panel container-fluid well" style="margin-top:50px;">
      <div class="container">
        <div style="clear: left;">
          <h3>挖矿说明</h3>
          <hr>
          <div class="panel-body" style="background-color:#ffffff;">
            <p>矿池向矿工支付所有的奖励，包括区块奖励，叔块奖励以及区块中包含的交易手续费</p>
            <p>挖矿手续费1%</p>
            <p>余额达到0.1BTX进行支付</p>
            <p>每3个小时进行一次支付，矿池承担支付所需的手续费</p>
            <p>矿池采用PPLNS模式，根据每天的出块个数，收益会有一定的波动</p>
          </div>
        </div>
      </div>
    </div>
    <div class="configure-panel container-fluid well">
      <div class="container">
        <div style="clear: left;">
          <h3>如何设置挖矿</h3>
          <hr>
          <div class="howto">
            <ul role="tablist" class="nav nav-tabs">
              <li role="presentation" class="active">
                <a href="#wamd" aria-controls="wamd" role="tab" data-toggle="tab" aria-expanded="false">Windows</a>
              </li>
            </ul>
            <div class="tab-content">
              <div role="tabpanel" id="wamd" class="tab-pane active">
                <div class="panel panel-default eth-config-panel">
                  <div class="panel-heading">
                    <h4>如何链接我们的矿池</h4>
                  </div>
                  <div class="panel-body">
                    <ul>
                      <li>
                        <p>btx-cd.poolgpu.com:6667</p>
                        <p>btx-sh.poolgpu.com:6667</p>
                        <p>btx-hz.poolgpu.com:6667</p>
                      </li>
                    </ul>
                  </div>
                  <div class="panel-heading">
                    <h4>设置挖矿程序</h4>
                  </div>
                  <div class="panel-body">
                    <h5>windows - N卡</h5>
                    <ul class="ul-decimal">
                      <li>点击下载
                        <a href="http://web.poolgpu.com/files/btx-client-N-x64.zip" target="_blank">btx-N卡挖矿客户端（64位）</a>
                        ，并解压</li>
                      <li>编辑start-btx.bat文件，如图：<img src="http://web.poolgpu.com/files/btx-client-N-interduction.jpg" alt=""></li>
                    </ul>
                    <h5>windows - A卡</h5>
                    <ul class="ul-decimal">
                      <li>点击下载
                        <a href="http://web.poolgpu.com/files/btx-client-A-x64.zip" target="_blank">btx-A卡挖矿客户端（64位）</a>
                        ，并解压</li>
                      <li>编辑start-btx.bat文件，如图：<img src="http://web.poolgpu.com/files/btx-client-A-interduction.jpg" alt=""></li>
                      <li>注意：由于算法的原因，A卡的算力比N卡低。</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="configure-panel container-fluid well">
      <div class="container">
        <div style="clear: left;">
          <h3>常见问题</h3>
          <hr>
          <div class="panel-body" style="background-color:#ffffff;">
            <div>如果遇到提示：Your system does not support CUDA 9.0 API!</div>
            <div>
              <ul>
                <li>请点击：<a href="https://developer.nvidia.com/cuda-downloads?target_os=Windows&target_arch=x86_64&target_version=10&target_type=exelocal" target="_blank">下载CUDA</a></li>
              </ul>
            </div>
            <div>如何获取BTX钱包地址？</div>
            <div>
              <ul>
                <li>请前往：<a href="http://www.eth.vc" target="_blank">收币网</a>&nbsp;注册生成钱包地址。</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>-->
  </div>
</template>

<script>
  import topheader from '@/components/common/top_header.vue';
  let dataArr = [];
  var getchname = function(enname) {
    var chname = "";
    switch(enname) {
      case "day":
        chname="天";
        break;
      case "week":
        chname="周";
        break;
      case "month":
        chname="月";
        break;
      case "year":
        chname="年";
        break;
      default:
        chname=enname;
        break;
    }
    return chname;
  }
  export default {
    name: 'hello',
    data() {
      return {
        minerAddr: "",
        minersList: [],
        minersNum: "",
        poolStats: {
          hashrate: "",
          miners: "",
          workerct: ""
        },
        blockNum: "",
        lucky: []
      }
    },
    methods: {
      init() {
        var that = this;
        dataArr = [];
        this.api.get({
          url: "/stats.shtml",
          data: {},
          callback: function(data) {
            if(data.hasOwnProperty("error")) {
              return
            }
            that.poolStats = data
          }
        });
        this.api.get({
          url: "/blocklist.shtml",
          data: {},
          callback: function(data) {
            if(data.hasOwnProperty("error")) {
              return
            }
            if(data && data.data) {
              that.blockNum = data.data.length;
            }
          }
        });
        this.api.get({
          url: "/minerlist.shtml",
          data: {},
          callback: function(data) {
            if(data.hasOwnProperty("error")) {
              return;
            }
            that.minersNum = data.data.length;
            data.data.sort(function(a, b) {
              return (b.hashrate - a.hashrate);
            });
            that.minersList = data.data.slice(0, 20);
          }
        });
        /*this.api.get({
          url: "/getluck.shtml",
          data: {},
          callback: function(data) {
            if(data.hasOwnProperty("error")) {
              return;
            }
            var rez = data.datas;
            for(var i in rez) {
              var ti = i;
              if(ti.search(/\d/) == (-1)) {
                ti = "1" + ti;
              }
              ti = ti.replace("day", getchname("day"));
              ti = ti.replace("week", getchname("week"));
              ti = ti.replace("month", getchname("month"));
              ti = ti.replace("year", getchname("year"));
              var lrate = rez[i];
              lrate = Math.round(lrate * 100) + "%";
              that.lucky.push({
                tim: ti,
                rat: lrate
              });
            }
          }
        });*/
      },
      minerDetail() {
        this.$router.push({
          path: "/miner",
          query: {
            addr: this.minerAddr
          }
        });
      },
      createCharts() {
        var chart = echarts.init(document.getElementById("totalHr"));
        var option;
        this.api.get({
          url: "/poolHistory.shtml",
          callback: function(data) {
            if(data.hasOwnProperty("error")) {
              return
            }
            option = {
              tooltip: {
                trigger: 'axis'
              },
              title: {
                text: '单位（MH）',
                left: 0,
                top: -5,
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 14
                }
              },
              grid: {
                left: '40',
                right: '0',
                top: '20',
                bottom: '40'
              },
              legend: {
                icon: 'rect',
                data: ['有效算力', '无效算力'],
                bottom: 'bottom',
                textStyle: {
                  fontSize: 12
                }
              },
              xAxis: {
                type: 'category',
                data: data.times,
                splitNumber: 10,
                axisLabel: {
                  show: true
                },
                axisTick: {
                  show: false
                }
              },
              yAxis: {
                type: 'value',
                position: 'left',
                animation: true,
                splitNumber: 5
              },
              series: [{
                name: '总算力',
                type: 'line',
                barMaxWidth: '20',
                data: data.hrs,
                itemStyle: {
                  normal: {
                    color: '#1F77B4'
                  }
                }
              }]
            };
            chart.setOption(option)
          }
        })

      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.init();
        vm.createCharts();
      })
    },
    components: {
      topheader
    }
  }
</script>

<style lang="scss" scoped>
  .stats-panel {
    padding: 0;
    background-color: white;
  }
  
  .welcome-title {
    margin: 80px auto 0;
  }
  
  .pool-title {
    margin: 0 0 50px 0;
    font: 24px "microsoft yahei";
    color: #333;
  }
  
  .show-states-panel {
    margin: 0 -70px;
    display: flex;
  }
  
  .show-state-item {
    margin: 0 70px;
    padding: 0;
    flex: 1;
  }
  
  .show-state-item .panel-heading {
    padding: 9px 15px;
    font: 18px "microsoft yahei";
    color: white;
  }
  
  .show-state-item .panel-body h4 {
    height: 64px;
    margin: 0;
    font: 20px/64px "microsoft yahei";
    color: #333;
  }
  
  .panel-hr {
    border-color: #DFBC52;
  }
  
  .panel-hr .panel-heading {
    background-color: #DFBC52;
  }
  
  .panel-miner {
    border-color: #658EC1;
  }
  
  .panel-miner .panel-heading {
    background-color: #658EC1;
  }
  
  .panel-block {
    border-color: #EF8D59;
  }
  
  .panel-block .panel-heading {
    background-color: #EF8D59;
  }
  
  .panel,
  .panel-heading {
    border-radius: 0;
  }
  
  .show-state-item .panel {
    margin-bottom: 0;
  }
  
  .show-states-panel {
    margin-bottom: 80px;
  }
  
  .configure-panel {
    margin-bottom: 0;
    padding-bottom: 10px;
  }
  
  .configure-panel ul {
    margin-bottom: 0;
    list-style-type: none;
  }
  
  .configure-panel .ul-decimal {
    list-style-type: decimal;
  }
  
  .configure-panel li {
    padding: 5px 0;
  }
  
  .configure-panel h4,
  .configure-panel h5 {
    font-weight: bold;
  }
  
  .configure-panel li img {
    max-width: 100%;
  }
  
  .table td {
    word-break: break-all;
  }
  .table {
    font-size: 16px;
  }
  
  .lucks-header th {
    text-align: center;
  }
  
  .top20-miner {
    padding-top: 60px;
  }
  .paycontent {
    color: #333333;
    background-color: #ffffff;
    font-size: 14px;
    padding: 15px;
    margin-bottom: 50px;
  }
  .paycontent p {
    line-height: 2;
  }
  
  #totalHr {
    width: 100%;
    height: 300px;
  }
  
  @media only screen and (min-width: 100px) and (max-width: 420px) {
    .show-states-panel {
      margin: 0 0 80px 0;
      display: block !important;
    }
    .show-state-item {
      margin: 0 15px;
    }
    .show-state-item-main {
      margin: 30px 15px;
    }
  }
</style>
